<template>
    <div>
        <h3>房号信息列表</h3>

        <input type="button" value="批量删除" class="btn btn-danger" @click="delAll()">
        <input type="button" value="批量上架" class="btn btn-info" @click="updstate(1)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkALl"></td>
                    <td>房型名称</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>       
                </tr>

                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkone"></td>
                    <td>{{item.houseName}}</td>
                    <td>{{item.houseNoName}}</td>
                    <td>{{item.desc}}</td>
                    <td>{{item.state?"上架":"下架"}}</td>       
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
const Route=useRoute();
const Router=useRouter();

onMounted(()=>{
    show();
})
const updstate=(state:any)=>{
    if(confirm("确认上架吗?")){
        axios({
            method:'put',
            url:'/api/HouseNo/UpdHouseNo',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })

        .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("上架成功");
        ids.value=[];
        checked.value=false;
        show();
       }
     
       
    })
    .catch(err=>{
        console.log(err);
    })
    }
}
const delAll=()=>{
    if(confirm("确认删除吗?")){
        axios({
            method:'delete',
            url:'/api/HouseNo/DelHouseNo',
            params:{
                ids:ids.value.toString(),
            }
        })

        .then(res=>{
        console.log(res);
       if(res.data>0){
        alert("删除成功");
        ids.value=[];
        checked.value=false;
        show();
       }
     
       
    })
    .catch(err=>{
        console.log(err);
    })
    }
   
}
const checkone=()=>{
    if(ids.value.length==data.value.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }
}
const checkALl=()=>{
    checked.value=!checked.value;
    if(checked.value==true)
    {
         ids.value=data.list.map((item:any)=>{
             return item.id;
        })

    }
    else{
    ids.value=[];
    }
}
let checked=ref(false);
let ids=ref([]);
const data:any=reactive({
    list:[],
})
const show=()=>{
    axios({
        method:'get',
        url:'/api/HouseNo/HouseNoShow',
        
    })
    .then(res=>{
        console.log(res);
        data.list=res.data
     
       
    })
    .catch(err=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>